import React, { Component } from "react";
import styles from "./register.module.css";
import axios from "axios";
import { Toast } from "antd-mobile";
import { withRouter } from "react-router-dom";
class register extends Component {
  state = {
    username: "", //账号
    password: "", //密码
    code: "", //验证码
  };
  //navs返回
  goToPrev = (params) => {
    this.props.history.go(-1);
  };
  //账号
  usernameChange = (e) => {
    this.setState({
      username: e.target.value,
    });
  };
  //密码
  passwordChange = (e) => {
    this.setState({
      password: e.target.value,
    });
  };
  //验证码
  codeChange = (e) => {
    this.setState({
      code: e.target.value,
    });
  };
  //删除账号
  deleteUser = () => {
    this.setState({
      username: "",
    });
  };
  //删除密码
  deletePass = () => {
    this.setState({
      password: "",
    });
  };
  //删除验证码
  deleteCodeVal = () => {
    this.setState({
      code: "",
    });
  };
  //发送验证码
  getCode = (params) => {
    axios
      .get("http://s.linweiqin.com/api/s/getMobileCode", {
        params: {
          mobile: this.state.username,
        },
      })
      .then((res) => {
        console.log(res);
        if (res.data.msg === "发送成功") {
          Toast.info("发送成功，请留意手机短信");
        } else {
          Toast.info("发送失败，请输入正确的手机号码");
        }
      });
  };
  //注册
  goRegister = (params) => {
    let { username, password, code } = this.state;
    if (username === "" || password === "" || code === "") {
      Toast.info("输入值不能为空", 1);
    } else {
      axios
        .post("http://s.linweiqin.com/api/s/createUser", {
          mobile: this.state.username,
          username: this.state.username,
          password: this.state.password,
          code: this.state.code,
        })
        .then((res) => {
          console.log(res);
          if (res.data.msg === "新增成功") {
            Toast.info("注册成功", 1, () => {
              this.props.history.push("login");
            });
          } else if (res.data.ret === 2) {
            Toast.info("账户已经存在", 1);
          } else {
            Toast.info("注册失败，请检查信息是否有误", 1);
          }
        })
        .catch((err) => {
          Toast.info("网络不给力啊", 1);
        });
    }
  };
  render() {
    let { username, password, code } = this.state;
    return (
      <div className={styles.gwRegister}>
        <div className={styles.gwRegisterNavs}>
          <div className={styles.NavsLeft}>
            <i onClick={this.goToPrev}>←</i>
          </div>
          <div className={styles.NavCenter}>账号注册</div>
          <div className={styles.NavRight}></div>
        </div>
        <div className={styles.gwUserPassMain}>
          <div className={styles.logoWrap}>
            <img
              className={styles.logoImg}
              src="//yanxuan.nosdn.127.net/39c5e4583753d4c3cb868a64c2c109ea.png"
              alt=""
            />
          </div>
          <div className={styles.MainAccount}>
            <input
              type="text"
              value={username}
              onChange={this.usernameChange}
              placeholder="手机号码"
            />
            {username === "" ? (
              ""
            ) : (
              <i
                id="deleteuser"
                onClick={this.deleteUser}
                className={styles.cross}
              >
                ×
              </i>
            )}
          </div>
          <div className={styles.MainPassword}>
            <input
              type="password"
              value={password}
              onChange={this.passwordChange}
              placeholder="密码"
            />
            {password === "" ? (
              ""
            ) : (
              <i
                id="deletpass"
                onClick={this.deletePass}
                className={styles.cross}
              >
                ×
              </i>
            )}
          </div>
          <div className={styles.verificationCode}>
            <input type="text" value={code} onChange={this.codeChange} />
            {code === "" ? (
              ""
            ) : (
              <i
                id="deleBtn"
                onClick={this.deleteCodeVal}
                className={styles.crossd}
              >
                ×
              </i>
            )}
            <div className={styles.sendVerificationCode} onClick={this.getCode}>
              发送验证码
            </div>
          </div>
        </div>
        <div className={styles.gwMain} onClick={this.goRegister}>
          注册
        </div>
        <div className="Ipttxt">
              <input type="checkbox" defaultChecked={true} />
              {"\u00A0\u00A0\u00A0"}
              <strong>
                我同意<a href="#">《服务条款》</a>和<a href="#">《网易隐私政策》</a>
              </strong>
            </div>
      </div>
    );
  }
}
export default withRouter(register);
